<template>
    <swiper :options="swiperOption" :style="{height: imgHeight + 'px'}">
　　    <swiper-slide 
            v-for="(item) in bannerList"
            :key="item.id"
        >
            <img :src="item.cover" :style="{width: '100%', height: imgHeight + 'px'}"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    components: {
        swiper,
        swiperSlide
    },
    props: {
        bannerList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            imgHeight: 185,
            swiperOption: {
                pagination: {
            　　　　el: '.swiper-pagination'
            　　}
            }
        };
    },
    computed: {
        imgHeight(){

        }
    },
    methods: {},
    created() {},
    mounted() {
        this.$nextTick(()=>{
            this.imgHeight = window.innerWidth * 0.5 ;
        });
    }
};
</script>
<style lang="scss" scoped>
</style>